<template>
    <div>
        <!--搜索区域-->
        <div class="search">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="菜单名称">
                    <el-input v-model="authName" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--头部工具区域-->
        <div class="head-btn">
            <el-button type="primary" @click="showAddRoleForm">添加</el-button>
        </div>
        <!--数据区域-->
        <div class="auth-table">
            <el-table
                    ref="tableList"
                    :data="tableData"
                    style="width: 100%;"
                    row-key="id">
                <el-table-column
                        prop="title"
                        label="菜单名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="图标"
                        width="180">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="permission"
                        label="权限标识">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="组件路由">
                </el-table-column>
                <el-table-column
                        prop="component"
                        label="组件名称">
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="deleteConfirm(scope.$index, scope.row)">
                            <el-button slot="reference" size="mini" type="danger">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--添加 编辑权限信息弹窗-->
        <el-dialog :title="title" :visible.sync="addAuthFormVisible" width="40%" @close="handleClear">
            <el-form :model="authForm" ref="authInfo" :rules="authRules" label-width="80px" size="medium"
                     label-position="left">
                <el-input v-model="authForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="authForm.pid"  ref="select" placeholder="请选择" style="width: 100%">
                        <el-option key="id" hidden :value="id" :label="label"></el-option>
                        <el-tree  ref="tree"
                                  style="padding: 0px 10px 10px 0px"
                                  :data="list"
                                  :expand-on-click-node="false"
                                  node-key="id"
                                  :default-expand-all="true"
                                  @node-click="handleCheck"
                        >
                        </el-tree>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="isMenu">
                    <el-radio-group v-model="authForm.isMenu">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称" prop="title">
                    <el-input v-model="authForm.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目录图标" prop="icon" v-show="authForm.isMenu===0">
                    <!--图标选择器-->
                    <e-icon-picker v-model="authForm.icon"/>
                </el-form-item>

                <el-form-item label="权限标识" prop="permission" v-show="authForm.isMenu===2">
                    <el-input v-model="authForm.permission" autocomplete="off" placeholder="按钮权限标识"></el-input>
                </el-form-item>

                <el-form-item label="组件名称" prop="component" v-show="authForm.isMenu===1">
                    <el-input v-model="authForm.component" autocomplete="off" placeholder="菜单组件名称"></el-input>
                </el-form-item>

                <el-form-item label="组件路径" prop="path" v-show="authForm.isMenu===1">
                    <el-input v-model="authForm.path" autocomplete="off" placeholder="菜单路径"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAuthInfo">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import {listToTree} from "@/util/treeUtil";
import {addPermission, deletePermissionById, getAuthTree, getPermissionById, getPermissionByTitle} from "@/request/api";
import {fastKey} from "core-js/internals/internal-metadata";

export default {
    name: "AuthView",
    data() {
        return {
            authName: "",
            tableData:[],
            list:[],
            title: '',
            id: '',
            menuType: 0,
            label:'',
            addAuthFormVisible: false,
            authForm:{
                isMenu: 0,
                pid: ''
            },
            authRules:{
                pid: [
                    {required: true, message: '请选择父菜单', trigger: 'blur'}
                ],
                isMenu: [
                    {required: true, message: '请选择类型', trigger: 'blur'}
                ],
                title: [
                    {required: true, message: '请填写名称', trigger: 'blur'}
                ]
            }
        }
    },
    methods:{
        // 搜索提交
        searchSubmit(){
            // 判断是否有数据
            if(this.authName){
                // 有数据 发请求
                getPermissionByTitle(this.authName).then(response=>{
                    this.tableData = [response.data]
                })
                return
            }
            // 没有
            this.treeList()
        },
        // 头部工具栏按钮
        showAddRoleForm(){
            this.addAuthFormVisible = true
            this.title = '添加菜单'
        },
        // 编辑
        handleEdit(index,row){
            this.addAuthFormVisible = true;
            this.title = '编辑菜单'
            // 回显
            getPermissionById(row.id).then(response=>{
                this.authForm = response.data.permission
                console.log(this.authForm)
                if(this.authForm.pid!==0){
                    this.label = response.data.parentTitle
                    this.id = response.data.permission.pid
                    return
                }
                // 一级菜单回显是上级菜单为根菜单
                this.label = '主目录'
                this.id = 0
            }).catch(error=>{
                this.$message.error("请求失败")
            })
        },
        // 删除
        deleteConfirm(index, row){
            deletePermissionById(row.id).then(response=>{
                if(response.code===0){
                    this.$message.success(response.msg)
                    this.treeList()
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error=>{
                this.$message.error("请求失败")
            })
        },
        // 清除
        handleClear(){
            this.authForm = {}
        },
        //
        handleCheck(val){
            // 点击节点获取 名称 赋值给label 显示在el-options中
            this.label = val.label
            this.id = val.id
            this.authForm.pid = val.id
            // 选择完毕关闭 下拉选
            this.$refs.select.blur()
        },
        // 添加菜单
        addAuthInfo(){
            this.$refs.authInfo.validate(valid=>{
                if(!valid){
                    this.$message.warning("请填写完整信息")
                    return
                }

                addPermission(this.authForm).then(response=>{
                    if(response.code===200){
                        this.$message.success(response.msg)
                        this.addAuthFormVisible = false
                        this.treeList()
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error=>{
                    this.$message.error("请求失败")
                })

            })

        },
        // 权限列表
        async treeList(){
            let {data} = await getAuthTree()
            this.tableData = listToTree(data)
            //  过滤数据 排除按钮级别权限  渲染上级菜单下拉选   [{},{}]  ->[{label,id,pid}]
            data = data.filter(dt => dt.isMenu !== 2);
            let permissions = data.map(p => {
                return {
                    label: p.title,
                    id: p.id,
                    pid: p.pid
                }
            })
            //   permissions [{label:,id:,pid:}]
            let select = {
                label: '主目录',
                id: 0,
                children: [...listToTree(permissions)]
            }
            this.list = [select]
        }
    },
    created() {
        this.treeList()

    }
}
</script>

<style scoped>
.search {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.head-btn{
    padding-top: 15px;
    padding-bottom: 10px;
}
.auth-table {
    height: 100%;
}
</style>